<template>
  <div class="t-button">
    <el-popconfirm v-if="tips == 'popconfirm'" @confirm="emit" :title="title">
      <component slot="reference" :is="component" v-bind="$attrs" >
        <slot/>
      </component>
    </el-popconfirm>
    <el-tooltip
      v-else-if="tips == 'tooltip'"
    effect="dark"
      :content="title"
      placement="bottom"
    >
    <component :is="component" v-bind="$attrs" @click="emit">
      <slot/>
    </component>
    </el-tooltip>
    <div v-else-if="tips == 'none' || tips == 'confirm'">
      <component :is="component" v-bind="$attrs" @click="emit">
        <slot/>
      </component>
    </div>
   
  </div>
</template>

<script>
export default {
  name:"t-tips-button",
  props: {
    //提示类型
    tips: {
      type: String,
      default: "none", //popconfirm tooltip  confirm none
    },
    //提示内容
    title: {
      type: [String,Number],
      default: "",
    },
    //按钮组件名称
    component: {
      type: String,
      default: "el-link", // el-button  el-link
    },
  },
  methods: {
    emit() {
      if(this.tips == 'confirm'){
        let title= this.title || '该操作不可逆, 是否继续?'
         this.$confirm(title, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.emitEvent();
        })
        return
      }
      this.emitEvent();
    },
    emitEvent(){
      this.$emit("click");
    }
  },
};
</script>

<style>
</style>